<template>
	<view class="pc_clickEffect" @tap="handleTouchStart">
		<view class="clickEffect" v-for="(item, index) in effects" :key="index" :style="item.style">
		</view>
	</view>
</template>

<script>
	export default {
		name: 'pc-clickEffect',
		props: {
			// prop 的定义保持不变
			color: {
				type: String,
				default: '#409EFF'
			},
			model: {
				type: String,
				default: 'default'
			},
			icon: {
				type: String,
				default: ''
			},
			size: {
				type: [String, Number],
				default: '50'
			},
			timeout: {
				type: [String, Number],
				default: '500'
			},
			derive: {
				type: [String, Number],
				default: '100'
			},
			moveColor: {
				type: String,
				default: '#409EFF'
			},
			drag: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				ismove: false,
				effects: []
			};
		},
		methods: {

			handleTouchStart(e) {

				// 处理点击事件
				const clientX = e.touches[0].clientX;
				const clientY = e.touches[0].clientY;
				this.createEffect(clientX, clientY);
			},
			handleTouchMove(e) {
				// const clientX = e.touches[0].clientX;
				// const clientY = e.touches[0].clientY;
				// this.createEffect(clientX, clientY, true);
			},
			createEffect(clientX, clientY, isMove = false) {
				// console.log('createEffect')
				let styleStart
				if (this.icon && this.icon !== '') {
					const size = uni.upx2px(Number(this.size));
					styleStart =
						`display: block; position: fixed; z-index: 999;    pointer-events: none; width: ${size}px; height: ${size}px; background-image: url(${this.icon}); background-size: cover; left: ${clientX - Number(this.size) / 4}px; top: ${clientY - Number(this.size) / 4}px;`;
				} else if (this.model === 'default' || isMove) {
					const nums = uni.upx2px(1);
					const color = isMove ? this.moveColor : this.color;
					styleStart =
						`display: block; position: fixed; z-index: 999;    pointer-events: none; width: ${nums}px; height: ${nums}px; background-color: ${color}; border-radius: 50px; opacity: 0.2; transform: scale(${this.derive}); transition: 0.3s transform; transform-origin: center; left: ${clientX}px; top: ${clientY}px;`;
				}
				this.effects.push({
					style: styleStart
				});
				this.$emit('handleTouchStart')
				setTimeout(() => {
					this.removeEffect(0)
				}, this.timeout);
			},
			removeEffect(index) {
				// console.log('removeEffect')
				if (this.effects.length > 0) {
					this.effects.splice(index, 1);
				}

			}
		}
	}
</script>

<style lang="scss">
	.pc_clickEffect {
		// pointer-events: none;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999999;
		// z-index: 99999;
		// bottom: -200rpx;
		transition: all .5s;


		.clickEffect {
			// pointer-events: none;
			animation: opacity-scale 0.5s cubic-bezier(0.1, -0.6, 0.2, 0) infinite;
		}
	}
</style>